<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)">
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input 
            type="text" 
            :value="todo.title" 
            v-show="todo.isEdit" 
            @blur="handBlur(todo,$event)"
            ref="inputTitle"
            >
        </label>
        <button @click="handEdit(todo)">编辑</button>
        <button class="btn btn-danger" @click="handRemove(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name: 'MyItem',
    props: ['todo','checkTodo','remove'],
    methods: {
        handEdit(todo) {
            if(todo.hasOwnProperty.call('isEdit')) {
                todo.isEdit = true
            }
            else { 
                this.$set(todo,'isEdit',true)
            }
            console.log(todo)
            this.$nextTick(function(){
                this.$refs.inputTitle.focus()
            })
        },
        handBlur(todo,e) {
            todo.isEdit = false
            this.$bus.$emit('updateTodo',todo.id,e.target.value)
            console.log(999)
        },
        handleCheck(id) {
            console.log(id);
            /**
             * 数据在App组件中，数据在哪就需要在哪写方法修改；
             * 因此需要通过App组件的方法修改，将方法传到item组件中，
             * 通过item组件调用到App组件的方法做到修改数据；
             */
            this.checkTodo(id);
        },
        // 删除单个元素
        handRemove(id) {
            if(confirm('确定删除吗？')) this.remove(id)
        }
    }
}
</script>
<style scope>
    li {
        border: 1px solid red;
        width: 320px;
        list-style: none;
        height: 28px;
    }
    .btn-danger {
        float: right;
    }
</style>